<template>
  <div class="navbar">
    <div class="content">
      <ul>
        <li class="first">网易云音乐</li>
        <li @click="$router.push('/recommend')">发现音乐</li>
        <li @click="$router.push('/my')">我的音乐</li>
        <li @click="$router.push('/friend')">朋友</li>
        <li>商城</li>
        <li>音乐人</li>
        <li>下载客户端</li>
      </ul>
      <el-autocomplete
        class="inline-input"
        placeholder="音乐/视频/电台/用户"
        :trigger-on-focus="false"
        :fetch-suggestions="querySearch"
        v-model="searchText"
      >
        <template slot-scope="{ item }">
          <div class="name" @click="$router.push(`/song/${item.id}`)"><i class="wyy wyy-bofang1"></i>&nbsp;&nbsp;{{ item.value }}</div>
          <p class="singer">{{ item.singer }} - {{ item.album }}</p>
        </template>
      </el-autocomplete>
      <div class="center">创作者中心</div>
      <div class="login" @click="showLogin = true" v-if="!userinfo">登录</div>
      <div class="login avaimg" v-else>
        <img :src="avaimg" alt="" >
      </div>
    </div>
    <Login :showLogin.sync="showLogin" @refresh="getUserInfo"></Login>
  </div>
</template>

<script>
import { songSearch } from '@/api/search.js'
export default {
  name: 'NavBar',
  data () {
    return {
      showLogin: false,
      userinfo: null,
      searchList: [],
      searchText: ''
    }
  },
  computed: {
    avaimg () {
      console.log(this.userinfo.profile.avatarUrl)
      return this.userinfo.profile.avatarUrl
    }
  },
  methods: {
    Logout (e) {
      this.showLogin = e
    },
    getUserInfo () {
      this.userinfo = this.$store.state.user
    },
    async querySearch (queryString, cb) {
      const { data } = await songSearch({
        keywords: queryString,
        limit: 20
      })
      const songs = data.result.songs
      console.log(songs)
      this.searchList = songs.map(item => {
        return {
          id: item.id,
          value: item.name,
          singer: item.ar[0].name,
          album: item.al.name
        }
      })
      console.log(this.searchList)
      // 调用 callback 返回建议列表的数据
      cb(this.searchList)
    },
    async songSearch () {

    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>

<style lang="less">
.navbar {
  background-color: #242424;
  z-index: 999;
  .content {
    position: relative;
    width: 1100px;
    margin: 0 auto;
    background-color: #242424;
    ul {
      display: flex;
      text-align: center;
      font-size: 14px;
      color: #ccc;
      align-items: center;
      li {
        width: 94px;
        height: 70px;
        line-height: 70px;
        padding: 0 10px;
      }
      li:hover {
        background: #000;
      }
      .first {
        width: 180px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 30px;
        font-size: #fff;
      }
      .last {
        margin-left: 100px;
      }
    }
    /deep/.inline-input {
      position: absolute;
      top: 18px;
      right: 150px;
      margin-left: 20px;
    }
    /deep/.el-input__inner {
      height: 32px;
      border-radius: 16px;
    }
    .center {
      position: absolute;
      top: 22px;
      right: 50px;
      width: 88px;
      height: 30px;
      line-height: 30px;
      background-color: #242424;
      border: 1px solid #4F4F4F;
      font-size: 12px;
      color: #ccc;
      text-align: center;
      border-radius: 12px;
    }
    .login {
      font-size: 12px;
      color: #888;
      position: absolute;
      top: 0;
      right: 5px;
      height: 70px;
      line-height: 70px;
    }
    .avaimg {
      width:30px;
      height: 30px;
      img{
        display: block;
        border-radius: 50%;
        position: absolute;
        top: 22px;
      }
    }
  }
}
</style>
